<template>
  <section class="nav">
    <div  
      :class="(currentNav==item.value)?'btn active':'btn'" 
      v-for="(item,index) in btnList" 
      :key="index"
      @click="handleClick(item)"
      :style="(currentNav==item.value)?`background:url(${item.activeUrl}) left center no-repeat`:`background:url(${item.url}) left center no-repeat`">
      {{item.value}}
    </div>
  </section>
</template>

<script>

import { mapGetters } from 'vuex'
import mapService from '@src/utils/mapService'
import {getHouseRebuildInfo,getCommunityStatistInfo,getHouseRebuildAOITree,getCommunityAOITree,getAOIInfo,getRebuildAOIInfo} from '@src/api/aoi'
export default {
  name: "Nav",
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      // currentValue:'社区管理',
      btnList:[
        {
          value:'社区管理',
          url:require('@src/assets/img/nav-btn-community.png'),
          activeUrl:require('@src/assets/img/nav-btn-community-active.png'),
          aoi_id:'A0000011'
        },
        {
          value:'棚屋改造',
          url:require('@src/assets/img/nav-btn-pwgz.png'),
          activeUrl:require('@src/assets/img/nav-btn-pwgz-active.png'),
          aoi_id:'B0000004'
        },
        {
          value:'POI更新',
          url:require('@src/assets/img/nav-btn-POI.png'),
          activeUrl:require('@src/assets/img/nav-btn-POI-active.png')
        },
        {
          value:'公共安全',
          url:require('@src/assets/img/nav-btn-safe.png'),
          activeUrl:require('@src/assets/img/nav-btn-safe-active.png')
        },
        {
          value:'资源环境',
          url:require('@src/assets/img/nav-btn-zyhj.png'),
          activeUrl:require('@src/assets/img/nav-btn-zyhj-active.png')
        },
      ],
      currentPointDataId:[],
      currentRoadDataId:[],
      currentAoiCorralId:null,
      // currentActiveSignParams:null
    };
  },
  computed: {
      ...mapGetters(['currentNav','videoList','communityData','reBuildData','currentHandleclickVideo']),
  },
  created(){
    window.cb_getAOIInfo=this.cb_getAOIInfo;
    window.cb_camera_click=this.cb_camera_click;
    window.cb_getSubjectAOIInfo=this.cb_getSubjectAOIInfo;
    window.cb_sceneEvent = this.cb_sceneEvent;
    window.$vue_nav = this;
    // this.cb_getAOIInfo();
    const that =this;
    mapService.get3dMapStatus=function(){
      that.$store.commit('home/SET_HEADER_AND_CONTROL_VISIBLE',true);
      // that.toJoin3Dtiles();
      that.init();
    }
  },
  mounted() {
    // getCommunityStatistInfo({aoi_id:1}).then(res => {
    //   this.$store.dispatch('nav/setCommunityData',res.result);
    // })
    
  },
  methods: {
    init(){
      this.clearMap(this.currentPointDataId);
      this.clearMap(this.currentRoadDataId);
      this.clearMap(this.currentAoiCorralId);
      this.clearMap('scene-id');// 清除演示点位
      // 社区管理专题面
      this.drawSubjectCorral('A0000011');
      this.queryCommunitySubjectAOIShapeData('A0000011');
      // 棚屋改造专题面
      this.drawSubjectCorral('B0000004');
      this.queryRebulidSubjectAOIShapeData('B0000004');
      // 定位
      this.toFlyPosition();
    },
    handleClick(item){
      this.toCloseEvent({
        id:'100300'
      });
      this.$store.commit('home/SET_CURRENTNAV',item.value);
      this.clearMap(this.currentPointDataId);
      this.clearMap(this.currentRoadDataId);
      this.clearMap(this.currentAoiCorralId);
      switch (item.value){
        case '社区管理':
          this.drawSubjectCorral(item.aoi_id,true);
          this.queryCommunitySubjectAOIShapeData(item.aoi_id);

          // 演示点位加载
          this.toDrawPointer({
            x:114.22875224,
            y:22.55303648,
            z:-9999,
            effect_id:'scene-id',
            path:'sf_pic//safe.png',
            cbName:'cb_sceneEvent',
            width:49,
            height:56
          });
          this.$store.commit('home/SET_SCENE_BTN_VISIBLE',false);
          break;
        case '棚屋改造':
          this.clearMap('scene-id');// 清除演示点位
          this.drawSubjectCorral(item.aoi_id,true);
          this.queryRebulidSubjectAOIShapeData(item.aoi_id);
          break;
        case 'POI更新':
          break;
        case '公共安全':
          break;
        case '资源环境':
          break;
        default :
          break;
      }
    },
    // 点击演示场景图标的回调
    cb_sceneEvent(){
      window.$vue_nav.clearMap();// 清除所有
      window.$vue_nav.toDrawPointer({
        x:114.22875224,
        y:22.55303648,
        z:-9999,
        effect_id:'scene-id',
        path:'sf_pic//safe.png',
        cbName:'cb_sceneEvent',
        width:49,
        height:56
      });
      window.$vue_nav.$store.commit('home/SET_CURRENTNAV','社区管理');
      window.$vue_nav.$store.commit('home/SET_COMMUNITY_DATA',null);
      window.$vue_nav.$store.commit('home/SET_SCENE_BTN_VISIBLE',true);
      window.$vue_nav.toOpenEvent({
        path:"plant\\SFScript\\事件弹出.as3",
        id:'100300'
      });
      
    },
    // 点击专题aoi面回调
    cb_getSubjectAOIInfo(data){
      window.$vue_nav.clearMap(window.$vue_nav.currentPointDataId);
      window.$vue_nav.clearMap(window.$vue_nav.currentRoadDataId);
      window.$vue_nav.currentPointDataId=[];
      window.$vue_nav.currentRoadDataId=[];
      window.$vue_nav.$store.dispatch('video/setCurrentHandleClickVideo','');
      if(data.aoiSubjectId==='A0000011'){
        window.$vue_nav.$store.commit('home/SET_CURRENTNAV','社区管理');
        window.$vue_nav.queryCurrentCommunityAOIBusinessData(data.aoiId,'A0000011');
      }else if(data.aoiSubjectId==='B0000004'){
        window.$vue_nav.$store.commit('home/SET_CURRENTNAV','棚屋改造');
        window.$vue_nav.queryCurrentRebuildAOIBusinessData(data.aoiId,'B0000004');
      }
    },
    // 点击小区aoi面回调
    cb_getAOIInfo(data){
      window.$vue_nav.clearMap(window.$vue_nav.currentPointDataId);
      window.$vue_nav.clearMap(window.$vue_nav.currentRoadDataId);
      window.$vue_nav.currentPointDataId=[];
      window.$vue_nav.currentRoadDataId=[];
      window.$vue_nav.$store.dispatch('video/setCurrentHandleClickVideo','');
      if(data.aoiSubjectId==='A0000011'){
        window.$vue_nav.$store.commit('home/SET_CURRENTNAV','社区管理');
        window.$vue_nav.queryCurrentCommunityAOIBusinessData(data.aoiId,'A0000011');
        window.$vue_nav.queryCurrentAOIGeoJsonData(data.aoiId);
      }else if(data.aoiSubjectId==='B0000004'){
        window.$vue_nav.$store.commit('home/SET_CURRENTNAV','棚屋改造');
        window.$vue_nav.queryCurrentRebuildAOIBusinessData(data.aoiId,'B0000004');
        window.$vue_nav.queryCurrentAOIRebuildData(data.aoiId);
      }
    },
    // 点击相机回调
    cb_camera_click(data){
      if(window.$vue_nav.currentHandleclickVideo&&window.$vue_nav.currentHandleclickVideo.effect_id == data.effect_id){
        window.$vue_nav.$store.dispatch('video/setCurrentHandleClickVideo','');
      }else{
        window.$vue_nav.$store.dispatch('video/setCurrentHandleClickVideo',data.effect_id);
      }
    },
    drawSubjectCorral(aoi_id,isFly=false){
      // 社区管理
      if(aoi_id==='A0000011'){
        getCommunityStatistInfo({aoi_id:aoi_id}).then(res => {
          this.$store.commit('home/SET_COMMUNITY_DATA',res.result);
          var shapeArr = this.changeShapeDataForRC(res.result.aoiStatist.shapeText);
          shapeArr.pop();
          this.toDrawCorralShapeAoi(shapeArr,'corral'+aoi_id);
          this.toDrawShapeAoi(shapeArr,'shape'+aoi_id,aoi_id,'cb_getSubjectAOIInfo','A0000011');
          if(isFly){
            var coord = res.result.aoiStatist.cameraCoordinate;
            this.toFlyPosition(coord);
          }
        })
      }
      // 棚屋改造
      else if(aoi_id==='B0000004'){
        getHouseRebuildInfo({aoi_id:aoi_id}).then(res => {
          this.$store.commit('home/SET_RE_BUILD_DATA',res.result);
          var shapeArr = this.changeShapeDataForRC(res.result.aoiStatist.shapeText);
          shapeArr.pop();
          this.toDrawCorralShapeAoi(shapeArr,'corral'+aoi_id);
          this.toDrawShapeAoi(shapeArr,'shape'+aoi_id,aoi_id,'cb_getSubjectAOIInfo','B0000004');
          if(isFly){
            var coord = res.result.aoiStatist.cameraCoordinate;
            this.toFlyPosition(coord);
          }
        })
      }
    },
    // 获取社区专题下所有面的数据,并渲染透明面
    queryCommunitySubjectAOIShapeData(aoiSubjectId){
      getCommunityAOITree({aoi_id:aoiSubjectId}).then(res => {
        const data = this.filterAOITreeData(res.result.children);
        for (let index = 0; index < data.length; index++) {
            const el = data[index];
            // 渲染所有的面
            this.toDrawShapeAoi(el.shape,'shape'+el.aoiId,el.aoiId,'cb_getAOIInfo',aoiSubjectId);
            // 渲染所有的标牌
            this.toDrawSign({
              effect_id:'sign'+el.aoiId,
              aoiId:el.aoiId,
              label_value:el.aoi,
              x:el.positionCoordinate.x,
              y:el.positionCoordinate.y,
              fnName:'cb_getAOIInfo',
              aoiSubjectId:aoiSubjectId,
            });
            // el.shape.pop();
            // this.toDrawShapeLine(el.shape);
            // this.toDrawCorralShapeAoi(el.shape,'corral'+el.aoiId);
        }
      })
    },
    // 获取棚屋改造专题下所有面的数据,并渲染透明面
    queryRebulidSubjectAOIShapeData(aoiSubjectId){
      getHouseRebuildAOITree({aoi_id:aoiSubjectId}).then(res => {
        const data = this.filterAOITreeData(res.result.children);
        for (let index = 0; index < data.length; index++) {
            const el = data[index];
            // 渲染所有的面
            this.toDrawShapeAoi(el.shape,'shape'+el.aoiId,el.aoiId,'cb_getAOIInfo',aoiSubjectId);
            // 渲染所有的标牌
            this.toDrawSign({
              effect_id:'sign'+el.aoiId,
              aoiId:el.aoiId,
              label_value:el.aoi,
              x:el.positionCoordinate.x,
              y:el.positionCoordinate.y,
              fnName:'cb_getAOIInfo',
              aoiSubjectId:aoiSubjectId,
            });
            // el.shape.pop();
            // this.toDrawShapeLine(el.shape);
            // this.toDrawCorralShapeAoi(el.shape,'corral'+el.aoiId);
        }
      })
    },
    
    // 查询社区管理下AOI的业务数据(定位,画围栏)
    queryCurrentCommunityAOIBusinessData(aoi_id,aoiSubjectId){
      getCommunityStatistInfo({aoi_id:aoi_id}).then(res => {
        this.$store.commit('home/SET_COMMUNITY_DATA',res.result);
        var coord = res.result.aoiStatist.cameraCoordinate;
        var shapeArr = this.changeShapeDataForRC(res.result.aoiStatist.shapeText);
        this.toFlyPosition(coord);
        shapeArr.pop();
        // if(this.currentActiveSignParams){
        //   this.currentActiveSignParams.linePath="竖线";
        //   this.currentActiveSignParams.path="sf_pic//aoi.png";
        //   this.clearMap(this.currentActiveSignParams.effect_id);
        //   this.toDrawSign(this.currentActiveSignParams);
        // }
        this.clearMap(this.currentAoiCorralId);
        // this.clearMap('sign'+aoi_id);
        if(aoi_id !=='A0000011'){
          this.toDrawCorralShapeAoi(shapeArr,'corral'+aoi_id);
          // this.queryCommunitySubjectAOIShapeData(aoiSubjectId);
          // let obj ={
          //   effect_id:'sign'+aoi_id,
          //   aoiId:aoi_id,
          //   label_value:res.result.aoiStatist.aoi,
          //   x:res.result.aoiStatist.positionCoordinate.x,
          //   y:res.result.aoiStatist.positionCoordinate.y,
          //   fnName:'cb_getAOIInfo',
          //   path:"sf_pic//aoi_active.png",
          //   linePath:"竖线_active",
          //   aoiSubjectId:aoiSubjectId
          // }
          // this.toDrawSign(obj)
          this.currentAoiCorralId='corral'+aoi_id;
          // this.currentActiveSignParams = obj;
        }
        // this.toDrawShapeAoi(shapeArr);
        // this.toDrawShapeLine(shapeArr);
      })
    },
    // 查询棚屋改造下AOI的业务数据(定位,画围栏)
    queryCurrentRebuildAOIBusinessData(aoi_id,aoiSubjectId){
      let that = this;
      getHouseRebuildInfo({aoi_id:aoi_id}).then(res => {
        this.$store.commit('home/SET_RE_BUILD_DATA',res.result);
        var coord = res.result.aoiStatist.cameraCoordinate;
        var shapeArr = this.changeShapeDataForRC(res.result.aoiStatist.shapeText);
        this.toFlyPosition(coord);
        shapeArr.pop();
        // if(this.currentActiveSignParams){
        //   this.currentActiveSignParams.linePath="竖线";
        //   this.currentActiveSignParams.path="sf_pic//aoi.png";
        //   this.clearMap(this.currentActiveSignParams.effect_id);
        //   this.toDrawSign(this.currentActiveSignParams);
        // }
        this.clearMap(this.currentAoiCorralId);
        // this.clearMap('sign'+aoi_id);
        if(aoi_id !=='B0000004'){
          this.toDrawCorralShapeAoi(shapeArr,'corral'+aoi_id);
          // let obj = {
          //   effect_id:'sign'+aoi_id,
          //   aoiId:aoi_id,
          //   label_value:res.result.aoiStatist.aoi,
          //   x:res.result.aoiStatist.positionCoordinate.x,
          //   y:res.result.aoiStatist.positionCoordinate.y,
          //   fnName:'cb_getAOIInfo',
          //   path:"sf_pic//aoi_active.png",
          //   linePath:"竖线_active",
          //   aoiSubjectId:aoiSubjectId
          // }
          // that.toDrawSign(obj)
          this.currentAoiCorralId='corral'+aoi_id;
          // this.currentActiveSignParams = obj;
        }
        // this.toDrawShapeAoi(shapeArr);
        // this.toDrawShapeLine(shapeArr);
      })
    },
   
    // 查询AOI的全部geojson数据
    queryCurrentAOIGeoJsonData(aoiId){
      getAOIInfo({adcode:440300,area_id:aoiId}).then(res=>{
        if(res.data){
          // this.filterGeoJsonData(res.data);
          // poi信息划点
          this.forGeoJsonPoi(res);
          // road划道路
          this.forGeoJsonRoad(res);
        }
      })
    },
    // 查询棚屋改造AOI的全部点位数据
    queryCurrentAOIRebuildData(aoiId){
      getRebuildAOIInfo({aoi_id:aoiId}).then(res=>{
        if(res.result){
          let videoList=[];
          // this.filterRebuildAoiData(res.data);
          // poi信息划点
          for (let index = 0; index < res.result.length; index++) {
            const el = res.result[index];
            // 停车场
            if(el.deviceType==='150900'){
              //this.toDrawPointer({x:el.x,y:el.y,z:el.z},'car'+index,'sf_pic//car.png');
              this.toDrawPointer({
                x:el.x,
                y:el.y,
                z:el.z,
                effect_id:'car'+index,
                path:'sf_pic//car.png'
              });
              this.currentPointDataId.push('car'+index);
            }
            // 大门
            else if(el.deviceType==='991400'){
              //this.toDrawPointer({x:el.x,y:el.y,z:el.z},'door'+index,'sf_pic//door.png');
              this.toDrawPointer({
                x:el.x,
                y:el.y,
                z:el.z,
                effect_id:'door'+index,
                path:'sf_pic//door.png'
              });
              this.currentPointDataId.push('door'+index);
            }
            // 监控
            else if(el.deviceType==='111111'){
              // this.toDrawPointer({x:el.x,y:el.y,z:el.z},'camera'+index,'sf_pic//camera.png','cb_camera_click');
              this.toDrawPointer({
                x:el.x,
                y:el.y,
                z:el.z,
                effect_id:'camera'+index,
                path:'sf_pic//camera.png',
                cbName:'cb_camera_click'
              });
              this.currentPointDataId.push('camera'+index);
              videoList.push({
                effect_id:'camera'+index,
                name:el.deviceName,
                url:require('../../public/video/'+el.videoUrl)
              })
            }
          }
          // 写死
          if(videoList.length>0){
            this.$store.commit('video/SET_VIDEOLIST',videoList);
          }
        }
      })
    },
    // geojson循环poi
    forGeoJsonPoi(res){
      for (let index = 0; index < res.data.properties.poi.features.length; index++) {
          const el = res.data.properties.poi.features[index];
          // console.log(el)
          // 停车场
          if(el.properties.poi_type === '150900'){
      //{x:el.properties.coord_x,y:el.properties.coord_y,z:-9999},'car'+index,'sf_pic//car.png'
            this.toDrawPointer({
              x:el.properties.coord_x,
              y:el.properties.coord_y,
              z:-9999,
              effect_id:'car'+index,
              path:'sf_pic//car.png'
            });
            this.currentPointDataId.push('car'+index);
          }
          // 大门
          else if(el.properties.poi_type === '991400'){
            // this.toDrawPointer({x:el.properties.coord_x,y:el.properties.coord_y,z:-9999},'door'+index,'sf_pic//door.png');
            this.toDrawPointer({
              x:el.properties.coord_x,
              y:el.properties.coord_y,
              z:-9999,
              effect_id:'door'+index,
              path:'sf_pic//door.png'
            });
            this.currentPointDataId.push('door'+index);
          }
          // 监控
          // 其它
          else {
            // this.toDrawPointer({x:el.properties.coord_x,y:el.properties.coord_y,z:-9999},'other'+index,'sf_pic//camera.png','cb_camera_click');
            // this.currentPointDataId.push('other'+index);
          }
        }
    },
    // geojson循环road
    forGeoJsonRoad(res){
      for (let index = 0; index < res.data.properties.road.features.length; index++) {
        const el = res.data.properties.road.features[index];
        const roadid=el.properties.roadid;
        const arr =[];
        for (let sub_index = 0; sub_index < el.geometry.coordinates.length; sub_index++) {
          const sub_el = el.geometry.coordinates[sub_index];
          arr.push({
            x:sub_el[0],
            y:sub_el[1],
            z:-9999
          })
        }
        // this.toDrawRoad(arr,'road'+roadid);
        // this.toDrawShapeLine(arr,'road'+roadid);
        this.toDrawFlowLine(arr,'road'+roadid)
        this.currentRoadDataId.push('road'+roadid);
      }
    },
    // 定位
    toFlyPosition(coord={
      "x": '114.231617',
      "y": '22.542882',
      "z": "103.032083",
      "alpha": "2.5179",
      "course": "-5.7935",
      "roll": "0.0000"
    }){
      const msg = {
          "service_id": "camera.locate",
          "pos_pose": coord,
          "time": "1000",
          "type": "1"
      };
      console.log(JSON.stringify(msg))
      mapService.sendService(msg);	
    },
    // 划围栏
    toDrawCorralShapeAoi(shapeArr,effect_id){
      const msg ={
        "height": 40,
        "pos":shapeArr,
        "ratio": 1,
        "index_scale_time": 10000,
        "service_id": "effect.bar_3d.create",
        // "texture_path": "sf_pic//red.png",
        "texture_path": "product_res//effect_res//围栏贴图//产业-围栏-蓝色.png",
        "effect_id": effect_id,
      }
      if(shapeArr.length==0) return
      console.log(JSON.stringify(msg))
      mapService.sendService(msg);
    },
    // 划面
    toDrawShapeAoi(shapeArr,effect_id,aoiId,cbName='cb_getAOIInfo',aoiSubjectId=''){
      const msg = {
        "service_id": "effect.texture_cover.create",
        "show": 1,
        "pos": shapeArr,
        "angle": 45,
        "texture_path": "sf_pic//transparent.png",
        "render_priority": 200,
        "effect_id":effect_id,
        "on_left_dbclick" : {
          "callback_data" : "$callback_data$",
          "function_name" : cbName,
          "page_title" : "",
          "service_id" : "page.call_function",
          "effect_id":effect_id,
          'aoiId':aoiId,
          'aoiSubjectId':aoiSubjectId
        },
      }
      console.log(JSON.stringify(msg));
      mapService.sendService(msg);
    },
    // 划线
    toDrawShapeLine(shapeArr,effect_id='test_texture_line'){
      const msg = {
        "service_id": "effect.texture_line.create",
        "pos":shapeArr,
        "height_offset": 0,
        "speed": 0.4,
        "color": "0xffffffff",
        "radius": 40,
        "ral": 70,
        "is_flow": 0,
        "texture_path": "product_res//effect_res//贴图线//虚线.png",
        "effect_id": effect_id
      }
      console.log(JSON.stringify(msg));
      mapService.sendService(msg);
    },
    // 划路
    toDrawRoad(shapeArr,effect_id='test_road_line'){
      const msg={
        "service_id": "effect.road_line.create",
        "pos": shapeArr,
        "width":1,
        // texture_path
        "effect_id" :effect_id
      }
      console.log(JSON.stringify(msg));
      mapService.sendService(msg);
    },
    // 划流动线
    toDrawFlowLine(shapeArr,effect_id='test_flow_line'){
      const msg={
        "service_id": "effect.flow_line.create",
        "pos": shapeArr,
        "width":"3",
        "tail_scale":"0.6",
        "flow_time":0,
        "render_priority":300,
        "texture_path": "sf_pic//line.png",
        // "flow_mode":0,
        "effect_id" : effect_id
      }
      console.log(JSON.stringify(msg));
      mapService.sendService(msg);
    },
    // 划点
    toDrawPointer(obj){
      let msg
      if(obj.cbName){
        msg = {
          "service_id": "effect.spatial_image.create",
          "pos": {
            "x":obj.x,
            "y":obj.y,
            "z":obj.z
          },
          "align_type": 2,
          "offset": {
              "x": 0,
              "y": 0
          },
          "texture_path": obj.path || 'sf_pic//door.png',
          "is_avoid":false,
          "width": obj.width || 32,
          "height": obj.height || 44,
          "max_show_height":3800,
          "effect_id": obj.effect_id,
          "on_left_dbclick" : {
            "callback_data" : "$callback_data$",
            "function_name" : obj.cbName || '',
            "page_title" : "",
            "service_id" : "page.call_function",
            "effect_id": obj.effect_id,
          }
        }
      }else{
         msg = {
          "service_id": "effect.spatial_image.create",
          "pos": {
            "x":obj.x,
            "y":obj.y,
            "z":obj.z
          },
          "align_type": 2,
          "offset": {
              "x": 0,
              "y": 0
          },
          "texture_path": obj.path || 'sf_pic//door.png',
          "max_show_height":3800,
          "is_avoid":false,
          "width": obj.width || 32,
          "height": obj.height || 44,
          "effect_id": obj.effect_id,
          "on_left_dbclick" : {
            "callback_data" : "$callback_data$",
            "function_name" : 'back',
            "page_title" : "",
            "service_id" : "page.call_function",
          }
        }
      }
      console.log(JSON.stringify(msg))
      mapService.sendService(msg);
    },
    // 添加标牌
    toDrawSign(obj){
      const msg = {
        "effect_id" : obj.effect_id,
        "icon" : {
            "height" : 60,
            "icon_type" : 0,
            "texture_dir" : "扩散环",
            "width" : 60
        },
        "max_show_height":4000,
        "pick_priority":1,
        "label" : {
            "height" : 34,
            "label_element" : [
              {
                  "font" : {
                    "color" : "0xffffffff",
                    "name" : "微软雅黑",
                    "size" : 18
                  },
                  "label_key" : '小区',
                  "label_value" : obj.label_value,
                  "rect" : {
                    "left":0,
                    "top":0,
                    "right":0,
                    "bottom":0
                  },
                  "type" : "text"
              }
            ],
            "texture_dir" : obj.path || "sf_pic//aoi.png",
            "width" : 130
        },
        "line" : {
            "height" : 100,
            "texture_dir" : obj.linePath || '竖线',
            "width" : 2
        },
        "pos" : {
            "x" : obj.x,
            "y" : obj.y,
            "z" : -9999
        },
        "on_left_dbclick" : {
            "callback_data" : "$callback_data$",
            "function_name" : obj.fnName,
            "page_title" : "",
            "service_id" : "page.call_function",
            "effect_id":obj.effect_id,
            'signParams':obj,
            'aoiId':obj.aoiId,
            'aoiSubjectId':obj.aoiSubjectId,
        },
        "service_id" : "effect.indicator_label.create"
      }
      console.log(JSON.stringify(msg))
      mapService.sendService(msg);
    },
    // 加载3dtiles
    toJoin3Dtiles(){
      const msg ={
        "id" : "moxing",
        "service_id" : "tile3d.show",
        "show" : 1,
        "url" : "http://10.82.244.103/440300/YTALL0812/tileset.json"
      }
      console.log(JSON.stringify(msg))
      mapService.sendService(msg);
    },
    // 清空
    clearMap(arr='__all__'){
      const msg ={
        "service_id":"effect.destroy", 
        "effect_id":arr, 
        "sync" : "get"
      };
      mapService.sendService(msg);
    },
    //事件弹出
		toOpenEvent(obj){
			const msg = {
        "releative_path": obj.path || "plant\\SFScript\\事件弹出.as3",
				"service_id": "smart_city_effect.script.play_script",
				"stop_mode": 1,
				"script_id":  obj.id || "100300"
      }
      console.log(JSON.stringify(msg));
      mapService.sendService(msg);
		},
		toCloseEvent(obj){
			const msg = {
				"service_id": "smart_city_effect.script.stop_script",
 				"script_id":  obj.id || "100300"
      }
      console.log(JSON.stringify(msg));
      mapService.sendService(msg);
		},
    // 遍历棚户区AOI数据集合
    // filterRebuildAoiData(data){

    // },

    // 遍历社区AOI数据(geojson)集合
    // filterGeoJsonData(data){
    //   // 点循环
    //   for (let index = 0; index < data.properties.poi.features.length; index++) {
    //       const el = data.properties.poi.features[index];
    //       // console.log(el)
    //       // 停车场
    //       if(el.properties.poi_type === '150900'){
    //         this.toDrawPointer({x:el.properties.coord_x,y:el.properties.coord_y,z:-9999},'car'+index,'sf_pic//car.png');
    //         this.currentPointDataId.push('car'+index);
    //       }
    //       // 大门
    //       else if(el.properties.poi_type === '991400'){
    //         this.toDrawPointer({x:el.properties.coord_x,y:el.properties.coord_y,z:-9999},'door'+index,'sf_pic//door.png');
    //         this.currentPointDataId.push('door'+index);
    //       }
    //       // 监控
    //       // 其它
    //       else {
    //         // this.toDrawPointer({x:el.properties.coord_x,y:el.properties.coord_y,z:-9999},'other'+index,'sf_pic//camera.png','cb_camera_click');
    //         // this.currentPointDataId.push('other'+index);
    //       }
    //   }
    // },
    
    // 遍历树集合数据
    filterAOITreeData(data){
      const that = this;
      let arr = [];
      const fillterData = function (data){
        for (let index = 0; index < data.length; index++) {
          const obj ={}
          const el = data[index];
          obj.aoi=el.aoi;
          obj.aoiId=el.aoiId;
          obj.shape = that.changeShapeDataForRC(el.shapeText);
          obj.positionCoordinate = el.positionCoordinate
          arr.push(obj);
          if(el.children && el.children.length>0){
            fillterData(el.children);
          }
        }
      }
      fillterData(data)
      return arr
    },   

    // 数据转换为高程
    changeShapeDataForRC(shapeStr){
      if(!shapeStr) return []
      const regex = /\(\((.+?)\)\)/g; 
      const coordStr=shapeStr.match(regex)[0].substring(2, shapeStr.match(regex)[0].length - 2);
      const coordArr = coordStr.split(',');
      const arr=[];
      coordArr.forEach(el => {
        arr.push({
          x:el.split(' ')[0],
          y:el.split(' ')[1],
          z:el.split(' ')[2],
        })
      });
      return arr;
    }
  },
  beforeDestroy() {
    this.clearMap();
  },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .nav{
    // position: absolute;
    // right: 1420px;
    // top: 58px;
    display: flex;
    .btn{
      padding-left: 30px;
      font-size: 14px;
      color: #BBBBBB;
      box-sizing: border-box;
      margin-right: 25px;
      height: 24px;
      line-height: 24px;
      background-size: 22.4px 19.9px!important;
      cursor: pointer;
      &.active{
        background-size: 23.7px 23.7px!important;
        color: #03DCEF;
        transition: all .3s;
      }
      &:nth-last-of-type(1){
        margin-right: 0;
      }
    }
  }
</style>
